<template>
	<view class="main">
		<view class="content">
			<view class="">
				<view class="top" :style="{ paddingTop: systemInfo.titleTop + 'px' }">
					<view class="main-title" :style="{ height: systemInfo.sBarHeight + 'px', 'line-height': systemInfo.sBarHeight + 'px' }">员工信息录入</view>
				</view>
			</view>
			<view class="form">
				<view class="com">
					<view class="cover">
						<image src="/static/rlogo.jpg" mode=""></image>
					</view>
					<view class="com-name">威远人力资源（上海）有限公司</view>
				</view>
				<view class="tip">请确保填写的信息真实准确</view>
				<view class="form-box">
					<view class="form-item">
						<view class="title">个人信息</view>
						<view class="item">
							<view class="left">姓名</view>
							<view class="right">
								<input type="text" placeholder="请输入姓名" v-model="formData.userName" />
							</view>
						</view>
						<view class="item">
							<view class="left">电话</view>
							<view class="right">
								<input type="number" placeholder="请输入电话" maxlength="11" v-model="formData.phone" />
							</view>
						</view>
						<view class="item" @click="xbOpenPicker = true">
							<view class="left">性别</view>
							<view class="right mo">
								<view class="text" v-if="!formData.sex">请选择</view>
								<view class="" v-else>
									<view class="text" v-if="formData.sex == 1">男</view>
									<view class="text" v-if="formData.sex == 2">女</view>
								</view>
								<view class="icon">
									<image src="/static/ri.png" mode="aspectFill"></image>
								</view>
							</view>
						</view>
						<view class="item">
							<view class="left">年龄</view>
							<view class="right">
								<input type="number" placeholder="请输入年龄" v-model="formData.age" />
							</view>
						</view>
						<view class="item">
							<view class="left">身份证</view>
							<view class="right">
								<input type="number" maxlength="18" placeholder="请输入身份证" v-model="formData.idCard" />
							</view>
						</view>
					</view>
					<view class="form-item">
						<view class="title">工资卡信息</view>
						<view class="item">
							<view class="left">银行卡号</view>
							<view class="right">
								<input type="number" placeholder="请输入银行卡号" v-model="formData.bankNo" />
							</view>
						</view>
						<view class="item">
							<view class="left">开户行</view>
							<view class="right">
								<input type="text" placeholder="请输入银行开户行" v-model="formData.bankName" />
							</view>
						</view>
					</view>
					<view class="form-item">
						<view class="title">入职信息</view>
						<view class="item" @click="xmOpenPicker = true">
							<view class="left">所在项目</view>
							<view class="right mo">
								<view class="text">{{ formData.projectName ? formData.projectName : '请选择' }}</view>
								<view class="icon">
									<image src="/static/ri.png" mode="aspectFill"></image>
								</view>
							</view>
						</view>
						<view class="item" @click="openDateTimePicker = true">
							<view class="left">入职时间</view>
							<view class="right mo">
								<view class="text">{{ formData.hireDate ? formData.hireDate : '请选择' }}</view>
								<view class="icon">
									<image src="/static/ri.png" mode="aspectFill"></image>
								</view>
							</view>
						</view>
						<view class="item" @click="htOpenPicker = true">
							<view class="left">是否签订合同</view>
							<view class="right mo">
								<view class="text" v-if="!formData.isContractSigned">请选择</view>
								<view class="" v-else>
									<view class="text" v-if="formData.isContractSigned == 1">是</view>
									<view class="text" v-if="formData.isContractSigned == 2">否</view>
								</view>
								<view class="icon">
									<image src="/static/ri.png" mode="aspectFill"></image>
								</view>
							</view>
						</view>
					</view>
					<view class="form-item">
						<view class="title">紧急联系人</view>
						<view class="item">
							<view class="left">姓名</view>
							<view class="right">
								<input type="text" placeholder="请输入姓名" v-model="formData.emergencyContactName" />
							</view>
						</view>
						<view class="item">
							<view class="left">电话</view>
							<view class="right">
								<input type="number" maxlength="11" placeholder="请输入电话" v-model="formData.emergencyContactPhone" />
							</view>
						</view>
					</view>
				</view>
			</view>
		</view>
		<view class="btn-box">
			<view class="btn" @click="submit">确认提交</view>
		</view>
	</view>
	<view class="n" :style="{ height: systemInfo.titleTop + systemInfo.sBarHeight + 'px', paddingTop: systemInfo.titleTop + 'px', opacity: nOpacity }">员工信息录入</view>

	<!-- 性别 -->
	<tn-picker mask v-model="formData.sex" v-model:open="xbOpenPicker" :data="xbPickerData" confirm-color="#4175f6" label-key="name" value-key="value" />
	<!-- 所在项目 -->
	<tn-picker mask v-model="formData.projectName" v-model:open="xmOpenPicker" :data="projectList" confirm-color="#4175f6" label-key="projectName" value-key="projectName" />
	<!-- 入职日期 -->
	<tn-date-time-picker
		format="YYYY-MM-DD"
		:init-current-date-time="false"
		mask
		v-model="formData.hireDate"
		v-model:open="openDateTimePicker"
		mode="date"
		confirm-color="#4175f6"
	/>
	<!-- 是否签订合同 -->
	<tn-picker mask v-model="formData.isContractSigned" v-model:open="htOpenPicker" :data="htPickerData" confirm-color="#4175f6" label-key="name" value-key="value" />
</template>

<script setup>
import { ref, nextTick, reactive } from 'vue';
import { onPageScroll, onLoad } from '@dcloudio/uni-app';
import TnPicker from '@/uni_modules/tuniaoui-vue3/components/picker/src/picker.vue';
import TnDateTimePicker from '@/uni_modules/tuniaoui-vue3/components/date-time-picker/src/date-time-picker.vue';
import { getProject, submitUser, getUserInfo, updateUser } from '@/api/apiList.js';

// 性别
const xbOpenPicker = ref(false);
const xbPickerData = ref([
	{ name: '男', value: 1 },
	{ name: '女', value: 2 }
]);

// 所在项目
const xmOpenPicker = ref(false);
const xmPickerData = ref([
	{ name: '吃饭', value: 1 },
	{ name: '碎叫', value: 2 },
	{ name: '打豆豆', value: 3 }
]);

// 入职时间
const openDateTimePicker = ref(false);

// 是否签订合同
const htOpenPicker = ref(false);
const htPickerData = ref([
	{ name: '是', value: 1 },
	{ name: '否', value: 2 }
]);

let formData = reactive({
	age: '',
	bankName: '',
	bankNo: '',
	emergencyContactName: '',
	emergencyContactPhone: '',
	hireDate: '',
	idCard: '',
	isContractSigned: '',
	phone: '',
	projectName: '',
	sex: '',
	userName: ''
});

// 提交
const submit = async () => {
	for (let key in formData) {
		if (!formData[key]) {
			uni.showToast({
				title: '请将信息填写完整',
				icon: 'none'
			});
			return;
		}
	}
	if (type.value == 1) {
		const res = await updateUser(formData);
		if (res.code == 200) {
			uni.navigateTo({
				url: '/pages/index/submit?type=1'
			});
		}
	} else {
		const res = await submitUser(formData);
		if (res.code == 200) {
			uni.navigateTo({
				url: '/pages/index/submit?type=1'
			});
		}
	}
};

const capsule = uni.getStorageSync('capsule');
let systemInfo = uni.getStorageSync('systemInfo');

const nOpacity = ref(0);
onPageScroll((res) => {
	const { scrollTop } = res;
	let value = scrollTop / 100;
	nOpacity.value = scrollTop >= systemInfo.sBarHeight - systemInfo.titleTop ? value : 0;
});

// 获取项目列表
const projectList = ref([]);
const getProjectList = async () => {
	const res = await getProject();
	if (res.code == 200) {
		projectList.value = res.data;
	}
};

let type = ref('');
onLoad((option) => {
	getProjectList();
	type.value = option.type ? option.type : '';
	if (type.value == 1) {
		getUser();
	}
});

const getUser = async () => {
	const userRes = await getUserInfo();
	if (userRes.code == 200) {
		const { id, age, bankName, bankNo, emergencyContactName, emergencyContactPhone, hireDate, idCard, isContractSigned, phone, projectName, sex, userName } = userRes.data;
		let data = {
			age,
			bankName,
			bankNo,
			emergencyContactName,
			emergencyContactPhone,
			hireDate,
			idCard,
			isContractSigned,
			phone,
			projectName,
			sex,
			userName,
			id
		};
		formData = data;
	}
};
</script>

<style>
/* page {
	height: 100%;
	background: linear-gradient(180deg, #2b77ff 0%, #f9f9f9 45%);
} */
</style>

<style lang="scss" scoped>
:deep(.tn-popup__content, .tn-popup__content--bottom) {
	border-radius: 30rpx 30rpx 0 0;
}
.n {
	background: #4f7ff7;
	// height: 54rpx;
	width: 100%;
	display: flex;
	align-items: center;
	font-family: Source Han Sans, Source Han Sans;
	font-weight: 500;
	font-size: 36rpx;
	color: rgba(255, 255, 255, 0.851);
	line-height: 24rpx;
	box-sizing: border-box;
	position: fixed;
	top: 0;
	padding-left: 32rpx;
	z-index: 1;
}
.main {
	height: 100%;
	background: linear-gradient(180deg, #2b77ff 0%, #f9f9f9 45%);
	padding-bottom: 130rpx;
}
.content {
	padding: 0 32rpx;
}
.main-title {
	font-family: Source Han Sans, Source Han Sans;
	font-weight: 500;
	font-size: 36rpx;
	color: rgba(255, 255, 255, 0.851);
}
.btn-box {
	width: 100%;
	padding: 16rpx 32rpx;
	position: fixed;
	left: 0;
	right: 0;
	bottom: 0;
	background-color: #fff;
	z-index: 1;
	.btn {
		width: 686rpx;
		height: 88rpx;
		background: #2b77ff;
		border-radius: 44rpx;
		display: flex;
		justify-content: center;
		align-items: center;
		color: #fff;
	}
}

.form {
	.com {
		display: flex;
		align-items: center;
		margin: 40rpx 0 28rpx 0;
		.cover {
			margin-right: 16rpx;
			image {
				width: 56rpx;
				height: 56rpx;
			}
		}
		.com-name {
			font-family: Source Han Sans, Source Han Sans;
			font-weight: 500;
			font-size: 32rpx;
			color: #ffffff;
		}
	}
	.tip {
		font-family: Source Han Sans, Source Han Sans;
		font-weight: 400;
		font-size: 28rpx;
		color: #ffffff;
		margin-bottom: 32rpx;
	}
	.form-box {
		.form-item {
			background: #ffffff;
			border-radius: 20rpx;
			padding: 24rpx;
			margin-bottom: 16rpx;
			.title {
				font-family: Source Han Sans, Source Han Sans;
				font-weight: 500;
				font-size: 28rpx;
				color: #3d3d3d;
				margin-bottom: 24rpx;
			}
			.item {
				display: flex;
				justify-content: space-between;
				align-items: center;
				background: #f4f7ff;
				border-radius: 16rpx;
				padding: 20rpx 32rpx;
				margin: 24rpx 0;
				.left {
					font-family: Source Han Sans, Source Han Sans;
					font-weight: 400;
					font-size: 28rpx;
					color: #3d3d3d;
				}
				.mo {
					display: flex;
					align-items: center;
					.text {
						font-family: Source Han Sans, Source Han Sans;
						font-weight: 400;
						font-size: 28rpx;
						color: #808080;
					}
					.icon {
						padding-top: 10rpx;
						image {
							width: 32rpx;
							height: 32rpx;
						}
					}
				}
				.right {
					width: auto;
					input {
						text-align: right;
						font-family: Source Han Sans, Source Han Sans;
						font-weight: 400;
						font-size: 28rpx;
						color: #808080;
						width: 400rpx;
					}
				}
			}
		}
	}
}
</style>
